<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MySQL EXPLAIN 可视化工具</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.8.24/dist/g6.min.js"></script>
</head>
<body>
    <!-- 全屏背景动画层 -->
    <div class="animated-background" id="animatedBackground">
        <div class="floating-square square-1"></div>
        <div class="floating-square square-2"></div>
        <div class="floating-square square-3"></div>
        <div class="floating-square square-4"></div>
        <div class="floating-square square-5"></div>
        <div class="floating-square square-6"></div>
        <div class="floating-square square-7"></div>
        <div class="floating-square square-8"></div>
    </div>

    <div class="app-container">
        <header class="app-header">
            <h1>🔍 MySQL EXPLAIN 可视化工具</h1>
            <div class="header-controls">
                <select class="theme-selector" id="themeSelector" title="选择界面主题风格">
                    <option value="light">🌟 玻璃态</option>
                    <option value="dark">🌙 暗夜</option>
                    <option value="tech">🤖 科技感</option>
                </select>
            </div>
        </header>

        <main class="main-content">
            <section class="visualization-section">
                <div class="visualization-header">
                    <h2>执行计划可视化</h2>
                    <div class="visualization-controls">
                        <button id="resetViewBtn" title="重置图表视图到初始状态，适应画布大小">🔄</button>
                        <button id="zoomInBtn" title="放大图表，查看更多细节">➕</button>
                        <button id="zoomOutBtn" title="缩小图表，查看全局结构">➖</button>
                        <button id="exportPngBtn" title="将可视化图表导出为PNG图片">📷</button>
                        <button id="exportJsonBtn" title="将解析后的数据导出为JSON文件">📄</button>
                    </div>
                </div>

                <div class="visualization-container">
                    <!-- 悬浮输入面板 -->
                    <div class="floating-input-panel" id="floatingInputPanel">
                        <div class="input-header">
                            <h2>数据输入</h2>
                            <button class="panel-toggle-btn" id="panelToggleBtn" title="收起/展开输入面板">−</button>
                        </div>
                        
                        <div class="input-content" id="inputContent">
                            <!-- 格式选择和显示区域 -->
                            <div class="format-display-row">
                                <div class="format-selector-container">
                                    <select id="formatSelector" class="format-selector" title="选择EXPLAIN格式类型">
                                        <option value="auto">🔍 自动检测</option>
                                        <option value="tree">🌳 Tree 格式</option>
                                        <option value="json">📋 JSON 格式</option>
                                        <option value="traditional">📊 Traditional</option>
                                    </select>
                                </div>
                                <div class="format-display-container">
                                    <div class="format-display-wrapper">
                                        <input type="text" id="formatDisplay" class="format-display" readonly placeholder="EXPLAIN" title="当前选择的格式对应的命令">
                                        <button class="copy-btn-inner" id="copyFormatBtn" title="复制格式命令到剪贴板">
                                            <span class="copy-icon">📋</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 快速操作区域 -->
                            <div class="quick-actions">
                                <button id="exampleBtn" class="action-btn" title="加载示例数据进行测试">
                                    <span>📝</span> 示例数据
                                </button>
                                <button id="clearBtn" class="action-btn" title="清空所有输入内容" disabled>
                                    <span>🗑️</span> 清空
                                </button>
                                <button id="pasteBtn" class="action-btn" title="从剪贴板粘贴数据">
                                    <span>📋</span> 粘贴
                                </button>
                            </div>
                            
                            <div class="input-area">
                                <!-- 格式状态指示器 -->
                                <div class="format-indicator" id="formatIndicator">
                                    <span class="indicator-icon">🔍</span>
                                    <span class="indicator-text">等待输入数据</span>
                                </div>
                                
                                <div class="file-upload-area" id="fileUploadArea" title="支持拖拽或点击上传 .txt、.sql、.json 文件">
                                    <p>📁 拖拽文件到此处或点击上传</p>
                                    <input type="file" id="fileInput" accept=".txt,.sql,.json" multiple>
                                </div>
                                
                                <textarea 
                                    id="explainInput" 
                                    placeholder="请粘贴 MySQL EXPLAIN 输出结果..."
                                    title="在此输入MySQL EXPLAIN命令的输出结果，支持Tree、JSON、Traditional格式"
                                ></textarea>
                            </div>

                            <button class="parse-btn" id="parseBtn" title="解析输入的EXPLAIN数据并生成可视化图表 (快捷键: Ctrl+Enter)">🚀 解析执行计划</button>
                        </div>
                    </div>
                    
                    <!-- 悬浮按钮组 -->
                    <div class="floating-controls">
                        <button class="floating-btn" id="floatingResetBtn" data-tooltip="重置图表视图到初始状态" title="重置图表视图到初始状态，适应画布大小">🔄</button>
                        <button class="floating-btn" id="floatingZoomInBtn" data-tooltip="放大图表查看细节" title="放大图表，查看更多细节">➕</button>
                        <button class="floating-btn" id="floatingZoomOutBtn" data-tooltip="缩小图表查看全局" title="缩小图表，查看全局结构">➖</button>
                        <button class="floating-btn" id="floatingExportPngBtn" data-tooltip="导出PNG图片" title="将可视化图表导出为PNG图片">📷</button>
                        <button class="floating-btn" id="floatingExportJsonBtn" data-tooltip="导出JSON数据" title="将解析后的数据导出为JSON文件">📄</button>
                    </div>
                    
                    <div id="graphContainer"></div>
                    
                    <!-- 悬浮统计信息 -->
                    <div class="floating-stats" id="floatingStats">
                        <div class="stat-item" title="查询执行的总成本估算，数值越小性能越好">
                            <span>总成本</span>
                            <span id="totalCost">-</span>
                        </div>
                        <div class="stat-item" title="执行计划中包含的操作节点总数">
                            <span>节点数</span>
                            <span id="nodeCount">-</span>
                        </div>
                        <div class="stat-item" title="实际执行时间，仅在EXPLAIN ANALYZE时显示">
                            <span>执行时间</span>
                            <span id="executionTime">-</span>
                        </div>
                        <div class="stat-item" title="查询过程中检查的数据行总数">
                            <span>检查行数</span>
                            <span id="rowsExamined">-</span>
                        </div>
                    </div>
                    
                    <div id="loadingState" class="loading-state hidden">
                        <div class="loading-spinner"></div>
                        <p>正在解析执行计划...</p>
                    </div>

                    <div id="emptyState" class="empty-state">
                        <span class="empty-icon">📊</span>
                        <h3>等待输入数据</h3>
                        <p>请在左侧输入 MySQL EXPLAIN 结果，然后点击解析按钮</p>
                    </div>

                    <div id="errorState" class="error-state hidden">
                        <span class="error-icon">❌</span>
                        <h3>解析失败</h3>
                        <p id="errorMessage">请检查输入格式是否正确</p>
                    </div>
                </div>

                <div id="nodeDetails" class="node-details hidden">
                    <div class="details-header">
                        <h3>节点详情</h3>
                        <button class="close-btn" id="closeDetailsBtn" title="关闭节点详情面板 (快捷键: Escape)">×</button>
                    </div>
                    <div class="details-content" id="detailsContent"></div>
                </div>
            </section>
        </main>
    </div>

    <div id="exampleModal" class="modal hidden">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>选择示例数据</h3>
                    <button class="close-btn" id="closeExampleModal" title="关闭示例数据窗口">×</button>
                </div>
                <div class="modal-body">
                    <div class="example-tabs">
                        <button class="tab-btn active" data-format="tree" title="MySQL 8.0+ Tree格式示例，推荐使用">Tree 格式</button>
                        <button class="tab-btn" data-format="json" title="JSON格式示例，结构化数据">JSON 格式</button>
                        <button class="tab-btn" data-format="traditional" title="传统表格格式示例，兼容性好">Traditional 格式</button>
                    </div>
                    <pre id="exampleContent"></pre>
                </div>
                <div class="modal-footer">
                    <button id="cancelExampleBtn" title="取消操作，关闭窗口">取消</button>
                    <button id="useExampleBtn" title="使用选中的示例数据填充输入框">使用此示例</button>
                </div>
            </div>
        </div>

    <script src="js/parser.js"></script>
    <script src="js/sql-examples.js"></script>
    <script src="js/visualizer.js"></script>
    <script src="js/app.js"></script>
</body>
</html>
